.related-items-tree {
  .add-item-form-container {
    border-bottom: 1px solid $border-color;

    .projects-dropdown .dropdown-contents {
      max-height: $dropdown-max-height - 50;
    }
  }

  .sub-tree-root {
    margin-left: $gl-padding-24;
    padding: 0;
  }

  .tree-item {
    &.tree-item-drag-active {
      opacity: 0.3;
      pointer-events: none;
    }

    .item-body {
      cursor: grab;

      &.item-logged-out {
        cursor: default;
        min-height: $grid-size * 5;
      }
    }

    .item-meta {
      line-height: $gl-line-height-18;
    }

    .btn-tree-item-chevron {
      margin-bottom: $gl-padding-4;
      margin-right: $gl-padding-4;
      padding: $gl-padding-8 0;
      line-height: 0;
      color: $gl-text-color;

      &:hover {
        border-color: $border-color;
        background-color: $border-color;
      }
    }

    .tree-item-noexpand {
      margin-left: $gl-sidebar-padding - 2;
    }

    .loading-icon {
      margin-left: $gl-padding-4 / 2;
      margin-right: $gl-padding-4;
    }
  }
}

.related-items-tree-body {
  border-bottom-left-radius: $gl-border-radius-base;
  border-bottom-right-radius: $gl-border-radius-base;
}

.tree-root > .list-item:last-child .tree-root:last-child {
  margin-bottom: 0;
}

.tree-item.has-children.item-expanded {
  > .list-item-body > .card-slim,
  .tree-item:last-child .card-slim {
    margin-bottom: $gl-vert-padding;
  }
}

.related-items-tree-container {
  .roadmap-app-container {
    .js-roadmap-shell {
      border-radius: $gl-border-radius-base;
    }

    .epics-list-item-empty {
      display: none;
    }

    // This is a hacky CSS to remove the border-bottom from the
    // last list in the roadmap.
    .epic-item-container:nth-last-child(4) {
      .epic-details-cell,
      .epic-timeline-cell {
        border-bottom: 0;
      }
    }
  }
}
